<template>
  <a-page-header
    style="border: 1px solid rgb(235, 237, 240)"
    :title="channel.recordInEditting.id"
    @back="$router.back()"
  >
    <template #extra>
      <a-flex gap="small" justify="flex-end">
        <a-button @click="loadRecords">{{ $t("104") }}</a-button>
      </a-flex>
    </template>
  </a-page-header>
  <a-table
    :columns="listCols"
    :data-source="lstDisplay"
    bordered
    size="small"
    :pagination="false"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.multi">
        <a-button
          v-if="record[column.dataIndex]"
          @click="goViewMultiFieldValues(record, column)"
        >
          <EllipsisOutlined />
        </a-button>
      </template>
      <template v-if="column.type == 211">
        <a-checkbox
          v-model:checked="record[column.dataIndex]"
          disabled
        ></a-checkbox>
      </template>
      <template v-if="column.type == 901 || column.type == 903">
        <span>{{ record[column.dataIndex] }}</span>
      </template>
      <template v-if="column.type == 401">
        <a href="#" @click="downloadFile(record, column)">{{
          record[column.dataIndex]
        }}</a>
      </template>
      <template v-if="column.dataIndex === 'operate'">
        <a-button type="link" @click="restoreVersion(record)"
          >{{ $t("131") }}
        </a-button>
        &nbsp;&nbsp;
        <a-button type="link" danger @click="removeVersion(record)"
          >{{ $t("226") }}
        </a-button>
      </template>
    </template>
  </a-table>
  <a-modal
    v-model:open="state.popMulti"
    :footer="null"
    :title="$t('132')"
    width="720px"
  >
    <a-list bordered :data-source="state.selectedFieldValus">
      <template #renderItem="{ item }">
        <a-list-item>{{ item }}</a-list-item>
      </template>
    </a-list>
  </a-modal>
</template>
<script setup>
import { onMounted, reactive } from "vue";
import CommonDefine from "@/component/CommonDefine";
import { EllipsisOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const channel = CommonDefine.channel();
const lstDisplay = reactive([]); //因为前端表格展示不支持.语法，弄一个专门放display的对象数组
const listCols = reactive([]);
const state = reactive({
  popMulti: false,
  selectedFieldValus: [],
});

const loadFields = () => {
  CommonDefine.clearArray(listCols);
  listCols.push({
    dataIndex: "0",
    title: t("133"),
    type: 0,
    multi: false,
    width: 160,
  });
  let fn = (fields) => {
    fields.forEach((fd) => {
      let col = {
        dataIndex: fd.id,
        title: fd.label,
        type: fd.fieldType,
        multi: fd.multi,
      };
      col.sorter = (a, b) => a[fd.id].localeCompare(b[fd.id], "zh");
      col.sortDirections = ["descend", "ascend"];
      listCols.push(col);
    });
    listCols.push({
      dataIndex: "operate",
      title: "",
      multi: false,
      type: 0,
    });
  };
  CommonDefine.runWithFieldCache(channel.recordInEditting.meta.modelId, fn);
};

const _do_fetch = () => {
  CommonDefine.apiGetArm(
    `/api/v1/record/versions/${channel.recordInEditting.meta.id}`,
    (d) => {
      d.forEach((x) => {
        let itm = {};
        itm["0"] = x.version;
        for (let key in x.value) {
          itm[key] = x.value[key].C;
        }
        lstDisplay.push(itm);
      });
    }
  );
};

const loadRecords = () => {
  CommonDefine.clearArray(lstDisplay);
  _do_fetch();
};

const removeVersion = (valueMap) => {
  CommonDefine.apiPostArm(
    "/api/v1/record/remove-version",
    {
      recordId: channel.recordInEditting.meta.id,
      versionId: valueMap["0"],
    },
    (d) => {
      CommonDefine.alert("record version remove successed");
      loadRecords();
    }
  );
};

const goViewMultiFieldValues = (valueMap, column) => {
  let displays = channel.recordInEditting.value[column.dataIndex]; //here is bug! show the old value.
  state.selectedFieldValus = displays;
  state.popMulti = true;
};

const restoreVersion = (valueMap) => {
  CommonDefine.apiPostArm(
    "/api/v1/record/restore-version",
    {
      recordId: channel.recordInEditting.meta.id,
      versionId: valueMap["0"],
    },
    (d) => {
      CommonDefine.alert("record version restore to version " + valueMap["0"]);
    }
  );
};

onMounted(() => {
  loadFields();
  loadRecords();
});
</script>
